<script setup lang="ts">
import { ref } from 'vue'
import useUplaod from '../composition/useUpload'
import { watch } from 'vue'
import { showNotify } from 'vant'

const { uploadFile } = useUplaod()

const props = defineProps<{ content: any }>()

const text = ref(props.content)

const emit = defineEmits<{
   (e: 'update:content', value: any): void
}>()

watch(
   () => props.content,
   (newValue) => {
      text.value = newValue
   }
)

watch(text, (newValue) => {
   emit('update:content', newValue)
})

const handleUploadImage = async (event: any, insertImage: any, files: any) => {
   if (!text.value) return showNotify({ type: 'warning', message: '内容不能为空' })
   const formData = new FormData()
   formData.append('file', files[0])
   const res = await uploadFile(formData)
   insertImage({
      url: res.data.url,
      desc: '',
      with: '30%'
   })
}
</script>
<template>
   <v-md-editor
      mode="edit"
      :disabled-menus="[]"
      :value="content"
      v-model="text"
      @upload-image="handleUploadImage"
      left-toolbar="undo redo | image"
      right-toolbar=" sync-scroll fullscreen"></v-md-editor>
</template>

<style lang="scss" scoped>
::v-deep .v-md-textarea-editor {
   @apply h-[600px];
}
</style>
